<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${painting.painter.name }${painting.title}_可观艺术网</title>
<meta name="Keywords" content="${painting.painter.name }${painting.title}拍卖,作品详情,当代画家作品鉴赏,可观艺术" />
<meta name="Description" content="${painting.painter.name }${painting.title}鉴赏,大图,高清图片鉴赏" />
<link href="../style/common.css" rel="stylesheet" type="text/css" />
<link href="../style/painting.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx }/js/head.js"></script>
<script type="text/javascript" src="${ctx }/js/fancybox/jquery-latest.min.js"></script>
<script type="text/javascript" src="${ctx }/js/fancybox/jquery.fancybox.pack.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="${ctx }/js/fancybox/jquery.fancybox.css?v=2.1.4" media="screen" />
<style type="text/css">
#content{text-align: left;width:960px;margin: 0 auto;border:1px solid #cccccc;background: #ffffff;margin-top: 5px;}

#ciyi_top{width: 670px;margin-left: 23px;}
#ciyi_center{width: 960px;}
#ciyi_bottom{height: 55px;}
#ciyi_left{float: left;padding: 0px 10px 0px 25px;}
#ciyi_middle{float: left;width: 630px;height: 630px;border: 1px solid #ccc;position:relative;}
#ciyi_right{float: left;}

.preImg{position:absolute; left:0px;top:0px;z-index:101;width: 20%;height: 100%;}
.nextImg{position:absolute; right:0px; top:0px;z-index:102;width: 20%;height: 100%;}

.newItem{padding: 5px 0px 5px 25px;font-size: 14px;color: #333333;}
#relativeList_div{width:960px;margin: 0 auto;border:1px solid #cccccc;margin-top: 4px;background: #ffffff}
.ciyi_pic{position: absolute;width: 618px;height: 618px;background: center center;margin-top: 6px;margin-left: 6px;background-repeat: no-repeat;}
.title_ciyi{font-size: 12px;}

.tips{width: 273px;height: 111px;background: url('${ctx }/images/ciyi/ts.png') no-repeat;position: absolute;z-index:2;display: none;left:-25px;top:-115px;font-size: 12px;}

.size_control_img_checked{cursor: pointer;border: 1px solid red;}

	.painter_outer{background-color:#cccccc;width: 76px;height: 90px;float:left;cursor: pointer;margin-left:15px;margin-top: 10px;}
	.painter_outer:hover{background-color:#ff9900;}
</style>

</head>
<body>

<div id="_link_div_win" style="display:none;z-index:1001;margin:auto;position: absolute;font-size: 12px;"></div>

<style type="text/css">
.head_item{float: left;height: 63px;width: 65px;line-height: 63px;text-align: center;}
.head_item2{float: left;height: 63px;}
</style>
<div style="width:960px;background: #ffffff;margin: 0 auto;margin-top: 5px;border: 1px solid #ccc;">
	<div class="head_item" style="width: 160px;"><a href="${ctx }/index.jsp"><img src="${ctx }/images/kglogo.jpg" width="110" height="55" border="0" style="margin-top: 4px;"/></a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div class="head_item"><a href="${ctx}/p/paintingAction!pList.do?type=3">瓷器</a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div class="head_item"><a href="${ctx}/p/paintingAction!pList_gallery.do">绘画</a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div class="head_item"><a href="${ctx}/p/paintingAction!pList.do?type=4">艺术家具</a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div class="head_item"><a href="${ctx}/front/all_paintings_painterstar.jsp?type=1">鉴赏</a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div class="head_item"><a href="${ctx}/front/indexAction!viewMarketIndex.do?type=youhua">行情</a></div>
	<div class="head_item2"><img src="${ctx }/images/fgx.jpg" width="1" height="63" /></div>
	<div style="float: left;height: 63px;line-height: 63px;width: 290px;padding-left: 20px;color:#febc5c;font-family: 雅黑;">收获一件作品&nbsp;&nbsp;留存一个世界</div>
	<div class="head_item" style="width: 155px;font-size: 12px;" id="customer_information"><a href="javascript:toLogon('${ctx }')" style="color: #979797">我的订单</a>&nbsp;|&nbsp;<a href="javascript:toRegister('${ctx }')" style="color: #979797">免费注册</a></div>
	<div style="clear: both;"></div>
</div>

<script  type="text/javascript">
	$.ajax( {
		type : "POST",
		url : "${ctx}/servlet/customerLogonCheck?time="+new Date(),
		timeout : 6000,
		async : true, 
		success : function(data, textStatus) {
			$("#customer_information").html(data);
		}
	});
</script>

	<div id="content">
		<div id="ciyi_top">
				<c:if test="${painting.onSaleFlag == '2' && painting.store == 0 }">
					<div style="float: left;padding-top: 15px;">
						<div style="text-align:center;width: 90px;height:29px;padding-top:10px;color: #ffffff;font-size: 15px;font-weight: bold;background-repeat: no-repeat;background: url('../images/ciyi/sale_bg.png');">售罄</div>
					</div>
				</c:if>
			<div style="float:left;font-family: 黑体;font-size: 22px;text-align: center;width: 570px;padding: 20px 0px 20px 0px;">
				${painting.title }
			</div>
			<div style="clear: both;"></div>
		</div>
		<div id="ciyi_center">
			<div id="ciyi_left">
				<div class="size_control_img_checked"><img src="../images/ciyi/jubu.png" border="0"/></div>
				<div style="margin-top: 20px;">
						<a href="${painting.originalImagePath }" id="view_quantu_link"><img src="../images/ciyi/quantu.png" border="0"/></a>
				</div>
			</div>
			<div id="ciyi_middle">
				<div class="preImg" title="浏览上一幅作品" style="cursor:url(../images/arr_left.cur),auto; "></div>
				<div class="nextImg" title="浏览下一幅作品" style="cursor:url(../images/arr_right.cur),auto;"></div> 
				<div style="background-image: url('${painting.middleImageBpath }');" class="ciyi_pic"></div>
			</div>
			<div id="ciyi_right">
				<div id="qqxl_div" style="height: 33px;font-size: 24px;font-family: 黑体;padding-left: 22px;">
					<c:if test="${painting.qqxl != null && painting.qqxl > 0}">
						全球限量<span style="color: red">${painting.qqxl }</span>${painting.unit2 }
					</c:if>
				</div>
				<div id="description">
					<div class="newItem">作品编号：KGCY${painting.id }</div>
					<div class="newItem">材质：${painting.caiZhi }</div>
					<div class="newItem">规格：<c:if test="${painting.width != null}">长<fmt:formatNumber value="${painting.width }" pattern="0"/>cm&nbsp;</c:if><c:if test="${painting.hight != null}">宽<fmt:formatNumber value="${painting.hight }" pattern="0"/>cm&nbsp;</c:if><c:if test="${painting.altitude != null}">高<fmt:formatNumber value="${painting.altitude }" pattern="0"/>cm</c:if></div>
					<c:if test="${painting.painter != null}">
						<div class="newItem">创作者：<a href="${ctx }/${painting.painter.englishName }" style="text-decoration: underline;">${painting.painter.name }</a>
	           				<c:if test="${not empty painting.zhengshu}"><a href="${painting.zhengShuImagePath }" target="_blank" style="text-decoration: underline;">查看证书</a></c:if>
						</div>
					</c:if>
					<div class="newItem">物流：卖方承担</div>
					<div class="newItem">提供方：${painting.provider }</div>
				</div>
				<c:if test="${painting.onSaleFlag == '2'}">
					<c:if test="${not empty requestScope.goods.price}"><div class="newItem">可观价：<span style="color: red"><em class="tb-rmb">¥</em><fmt:formatNumber value="${requestScope.goods.price }" pattern="#.##"/></span>元</div></c:if>
					<c:if test="${not empty requestScope.goods.mktprice}"><div class="newItem">促销价：<span style="color: red"><em class="tb-rmb">¥</em><fmt:formatNumber value="${requestScope.goods.mktprice }" pattern="#.##"/></span>元</div></c:if>
					<c:if test="${not empty requestScope.goods.store}"><div class="newItem">库存量：<span style="color: red;">${requestScope.goods.store }</span>&nbsp;${requestScope.goods.unit }</div></c:if>
					<div class="newItem">
						<div style="float: left;">
							<img src="../images/ciyi/wym.jpg" border="0"/>
							<img src="../images/ciyi/jian.jpg"  onclick="changenum_goods(-1)" style="cursor:pointer;"  border="0"/>
						</div>
						<div style="float: left;padding-top: 5px;">
							<input type="text" name="num_goods_buy" id="num_goods_buy" value="1" style="width: 60px;border: 1px solid #ccc;"/>
						</div>
						<div style="float: left;">
							<img src="../images/ciyi/jia.jpg"  onclick="changenum_goods(1)" style="cursor:pointer;"  border="0"/>
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="newItem">
						<c:choose>
							<c:when test="${painting.store > 0 }"><img src="../images/ciyi/dg.jpg" width="131" height="44" style="cursor:pointer;" onclick="onbuy()"/></c:when>
							<c:otherwise><img src="../images/ciyi/dg2.jpg" width="131" height="44"/></c:otherwise>
						</c:choose>
					</div>
					<div id="subscribe_div" style="width: 200px;padding: 20px 0px 0px 25px;position: relative;margin: 0px;">
						<c:if test="${requestScope.subscribeFlag == '1'}">
								<div><a style="text-decoration: underline;cursor: pointer;width: 90px;height: 45px;display: block;" id="subscribe_link">预定电话</a></div>
								<div class="tips">
									<p style="text-align: center;padding-top: 50px;margin: 0;">如需预定作品或品鉴原作请致电<font color="red">0755-86292234</font></p>
								</div>
						</c:if>
					</div>
				</c:if>
				
				<div id="other_pics" style="width: 200px;position: absolute;margin-left: 10px;">
					<c:if test="${not empty  painting.imageInfo}">
						<div class="painter_outer"><div style="margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url('${painting.smallImagePath }');background-repeat:no-repeat;"><a style="display:block;width:66px;height:82px;"></a></div></div>
					</c:if>
					<c:if test="${not empty  painting.imageInfo2}">
						<div class="painter_outer"><div style="margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url('${painting.smallImagePath2 }');background-repeat:no-repeat;"><a style="display:block;width:66px;height:82px;"></a></div></div>
					</c:if>
					<c:if test="${not empty  painting.imageInfo3}">
						<div class="painter_outer"><div style="margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url('${painting.smallImagePath3 }');background-repeat:no-repeat;"><a style="display:block;width:66px;height:82px;"></a></div></div>
					</c:if>
					<c:if test="${not empty  painting.imageInfo4}">
						<div class="painter_outer"><div style="margin-top:4px;margin-left:5px;width: 66px;height: 82px;background-position: center center;background-image: url('${painting.smallImagePath4 }');background-repeat:no-repeat;"><a style="display:block;width:66px;height:82px;"></a></div></div>
					</c:if>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div id="ciyi_bottom"></div>
	</div>
	
	<div id="relativeList_div">
		<div style="font-size: 14px;padding: 5px 0px 5px 35px;">相关作品</div>
		<c:forEach items="${requestScope.relativeList}" var="result" varStatus="status">
			<%@ include file="/ciyi/ciyi_fragment.jsp" %>
		</c:forEach>
	</div>

<form id="orderForm" name="orderForm" action="${ctx }/customer/order!orderPrepare.do" method="post">
	<input type="hidden" value="${requestScope.goods.id }" name="gId" id="gId"/>
	<input type="hidden" value="1" name="num" id="num"/>
</form>	



<script type="text/javascript">

var paintingArray = ${requestScope.paintingArray};
var imagesArray = ${requestScope.imagesArray};

/**** 距滚动条顶部距离 *******/
function getScrollTop(){
	var scrollPos; 
	if (typeof window.pageYOffset != 'undefined') { 
	   scrollPos = window.pageYOffset; 
	} 
	else if (typeof document.compatMode != 'undefined' && 
	     document.compatMode != 'BackCompat') { 
	   scrollPos = document.documentElement.scrollTop; 
	} 
	else if (typeof document.body != 'undefined') { 
	   scrollPos = document.body.scrollTop; 
	}
	return  scrollPos;
}

function createPopupDiv(divId,width,height,content){

	var divWindow = document.getElementById(divId);
	divWindow.style.display = "block";
	divWindow.style.width = width +"px";
	divWindow.style.height  = height + "px" ;
	var scrollTop = getScrollTop() ;
	divWindow.style.left = (document.body.offsetWidth - width)/2 + document.body.scrollLeft + "px";
	divWindow.style.top  = (window.screen.availHeight - height) / 2 + scrollTop + "px";
	divWindow.innerHTML = content;
}

function closePopupDiv(divId){

	var divWindow = document.getElementById(divId);
	divWindow.style.display = "none";
}

function changenum_goods(flag){
	var _oldnum = $("#num_goods_buy").val() ;
	_oldnum = parseInt(_oldnum,"10")
	var _num = _oldnum + flag;
	var _store  = '${requestScope.goods.store}';
	if( _num < 1 ){
		alert("选购商品数量最少为1。");
		_num  = 1;
	}else {
		var _store = parseInt(_store);
		if( _num > _store ){
			alert("选购商品数量不能超过库存数量。");
			_num = _store;
	       }
		}
	$("#num_goods_buy").val(_num);
	$("#num").val(_num);
}

function onbuy(){
	$.ajax( {
		type : "POST",
		url : "${ctx}/customer/order!checkL.do?time="+new Date(),
		timeout : 6000,
		async : false, 
		success : function(data, textStatus) {
			if(data  == "0000"){
				var num_goods = $("#num_goods_buy").val();
				$("#num").val(num_goods);
				$("#orderForm").submit();
			}
			else{
				var link_url = "${ctx}/user/login_fragment.jsp";
				var width = 383;
				var height = 265;
				var content = '<iframe src="'+link_url+'" width="383" height="264" frameborder="0" marginheight="0" marginwidth="0">';
				createPopupDiv("_link_div_win",width,height,content);
			}
		}
	});
}

//切换组图
function qiehuanPic(){
	var imgpath = imagesArray[index_images].middleImageBpath;
	$(".ciyi_pic").css("background-image","url('"+imgpath+"')");
	$(".ciyi_pic").css("background-repeat","no-repeat");
}

var index_images = 0;//图片序列
$(function(){

	 $("#subscribe_link").hover(function() {
		  $(".tips").animate({opacity: "show", top: "-100"}, "slow");
		 }, function() {
			 $(".tips").animate({opacity: "hide", top: "-105"}, "fast");
	});
	
	$(".painter_outer").click(function(){
	   index_images = $(".painter_outer").index($(this));
	   $("#view_quantu_link").attr("href",imagesArray[index_images].originalImagePath);
	   qiehuanPic();
    });
	
	//查看原图
	$("#view_quantu_link").fancybox({maxWidth:"900px",fitToView:false});
	
	$(".preImg").click(function(){
			if(paintingArray.length == 2 && paintingArray[0] > 0 ){
				var id  = paintingArray[0];
				var link_url = "${ctx}/ciyi/ciyi!detail.do?id="+id;
				location.href = link_url;
			}
		});
	
	$(".nextImg").click(function(){
			if(paintingArray.length == 2 && paintingArray[1]  > 0 ){
				var id  = paintingArray[1];
				var link_url = "${ctx}/ciyi/ciyi!detail.do?id="+id;
				location.href = link_url;
			}
		});

});
</script>

<%@include file="/commons/foot.jsp" %>

</body>

</html>